<template>
    <div>
        <div class="discuss" ref="ddiscuss" v-for="(item,i) in text" :key="i">
           <dl class="dtitle">
               <dt>
                   <img :src="item.userimg" alt="">
               </dt>
               <dd>
                   <h4>{{item.name}}<span></span></h4>
                   <p>{{item.time}}小时前<span>宝宝{{item.babyname}}岁</span></p>
               </dd>
           </dl>
           <div class="text" ref="text">
             {{item.text}}
           </div>
           <p class="alltext" @click="alltet($event)">{{complete}}</p>
           <div class="disimg">
               <img :src="item.img" alt="">
           </div>
           <van-row type="flex" justify="space-around">
            <van-col span="6">分享</van-col>
            <van-col span="6">评论</van-col>
            <van-col span="6">
                <van-icon name="like-o" />{{item.attention}}
            </van-col>
            </van-row>
        </div>
    
        
    </div>
</template>

<script>
import Axios from 'axios';
    export default {
        name:'Discuss',
        data() {
            return {
                complete:'全部',
                text:''
            }
        },
        methods: {
            alltet(ev){
                if(ev.target.innerText == '全部' ){
                let alltext = ev.target.previousElementSibling
                    alltext.style.height = 'auto'
                    ev.target.innerText = '收起'
                }else if(ev.target.innerText == '收起'){
                    let alltext1 = ev.target.previousElementSibling
                   ev.target.innerText = '全部'
                    alltext1.style.height = 60+'px'
                }
               
            }
        },
        mounted() {
            var that = this
            Axios({
                url:'http://10.8.158.60:8080/articleAll.do',
                params:{id:1}
            }).then(function(data){
                
            }),
            Axios({
                url:"http://www.chenwenzhang/api",

            }).then(function(data){
                that.text = data.data.article
            })
        },
    }
</script>

<style scoped>
    
    .discuss{
        width: 100%;
        min-height: 210px;
        line-height: 17px;
        background-color: rgba(234, 234, 234, 1);
        font-size: 12px;
        margin-bottom: 25px;
        padding: 20px 13px
    }
    .dtitle{
        display: flex;
        height: 80px;
        align-items: center;
        color: rgba(166, 164, 164, 1);
    }
    .dtitle img{
        width: 44px;
        height: 44px;
        border-radius: 50%;
        margin-right: 1px;
    }
    .dtitle dd h4{
        font-size: 14px;
        color: #000
    }
    .dtitle dd span{
        margin-left: 5px;
        
    }
    .text{
        width: 347px;
        height: 60px;
        white-space: pre-wrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .alltext{
        margin-top: 18px
    }
    .disimg{
        margin-top: 12px;
        width: 348px;
        height: 152px;

    }
    .disimg img{
        display: block;
        width: 347px;
        height: 152px;
    }
    .van-row{
        height: 40px;
        line-height: 40px;
        font-size: 12px;
        text-align: center
    }
</style>